<template>
  <div id="signup-dialog">
    <!-- <el-dialog title="注册" :visible.sync="isDialog" @close="onDialogClose" :close-on-click-modal="false" class="dialog-box" center width="30%"> -->
    <div class="ResetBody">
      <p class="title">注 册</p>
      <div class="reg-zc dialog-box">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <el-form-item label="版本：" prop="region" v-if="false">
            <el-select v-model="form.region" :disabled="true" placeholder="请选择对应版本">
              <el-option v-for="item in optios" :key="item.id" :label="item.value" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="企业名称：" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="手机号：" prop="phone">
            <el-input v-model="form.phone"></el-input>
            <el-button class="btn" style="height:30px;" type="primary" @click="ResendCode(form.phone, 'publicApi','getiphone' )" :disabled="phonedisabled">{{btnText}}</el-button>
          </el-form-item>
          <el-form-item label="验证码：" prop="registerCode">
            <el-input v-model="form.registerCode"></el-input>
          </el-form-item>
          <el-form-item label="密码：" prop="password">
            <el-input v-model="form.password" show-password></el-input>
          </el-form-item>
          <el-form-item label="确认密码：" prop="passwords">
            <el-input v-model="form.passwords" show-password></el-input>
          </el-form-item>
          <el-form-item label="邮箱：" prop="emall">
            <el-input v-model="form.emall"></el-input>
          </el-form-item>
          <el-form-item label="地址：" prop="address">
            <el-cascader style="width:100%" :options="cityList" v-model="form.address" :props="defaultProps"></el-cascader>
          </el-form-item>
          <el-form-item label="所属行业：" prop="industryid">
            <el-select v-model="form.industryid" clearable filterable>
              <el-option v-for="item in industryList" :key="item.id" :label="item.industryName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="销售码：">
            <el-input v-model="form.code"></el-input>
          </el-form-item>

        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="isDialog = false">取 消</el-button> -->
        <el-button type="primary" :loading="isConfirmLoading" @click="onReg('form')">立即注册</el-button>
      </span>
    </div>
    <!-- </el-dialog> -->
  </div>
</template>

<script>
import { mapState } from "vuex";
import * as Vrules from '@/util/validate';
import useGetCode from '../mixins/useGetCode';
import md5 from "js-md5";
export default {
  name: 'siganupDialog',
  // props: {
  // isSignupDialog: {
  //   type: Boolean,
  //   default: false
  // }
  // },
  mixins: [useGetCode],
  data() {
    let ISpassword = (rule, value, callback) => {
      setTimeout(() => {
        if (this.form.passwords) {
          if (this.form.password != this.form.passwords) {
            callback(new Error("两次密码不一致!"));
          } else {
            callback();
          }
        } else {
          callback();
        }
      }, 500);
    };
    let ISpasswords = (rule, value, callback) => {
      setTimeout(() => {
        if (this.form.password) {
          if (this.form.password != this.form.passwords) {
            callback(new Error("两次密码不一致!"));
          } else {
            callback();
          }
        } else {
          callback();
        }
      }, 500);
    };
    return {
      form: {
        name: "",
        phone: "",
        password: "",
        passwords: "",
        region: 1,
        address: "",
        emall: "",
        code: "",
        industryid: '',
        registerCode: ''
      },
      industryList: [],
      rules: {
        region: [
          { required: true, message: '请选择版本', trigger: 'change' }
        ],
        name: [
          { required: true, message: '请输入企业名称', trigger: 'change' },
          { min: 1, max: 25, message: '长度在 1 到 25 个字符', trigger: 'change' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'change' },
          { validator: Vrules.isPhone, trigger: 'change' }
        ],
        registerCode: [
          { required: true, message: '请输入验证码', trigger: 'change' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'change' },
          { pattern: /^(?=.*[0-9].*)(?=.*[A-z].*).{8,}$/, message: '密码至少八位  且密码中必须包含字母,数字', trigger: 'change' },
          { validator: ISpassword, trigger: 'change' }
        ],
        passwords: [
          { required: true, message: '请再次输入密码', trigger: 'change' },
          { validator: ISpasswords, trigger: 'change' }
        ],
        emall: [
          { required: true, message: '请输入邮箱', trigger: 'change' },
          { validator: Vrules.isEmail, trigger: 'change' }
        ],
        address: [
          { required: true, message: '请选择地址', trigger: 'change' }
        ],
        industryid: [
          { required: true, message: '请选择所属行业', trigger: 'change' }
        ],
      },
      defaultProps: {
        children: "children",
        label: "name",
        value: "areaID"
      },
      isConfirmLoading: false
    };
  },
  computed: {
    // isDialog: {
    //   get() {
    //     return this.isSignupDialog;
    //   },
    //   set(newVal) {
    //     this.$emit('update:isSignupDialog', newVal);
    //   }
    // },
    ...mapState({
      cityList: state => state.common.provinceCityList
    })
  },
  methods: {
    getindustryidList() {
      this.$api.publicApi.GetCompanyIndustryTemp().then(res => {
        let { data, message, status } = res.data;
        if (status == 200) this.industryList = data;
      }).catch(() => {

      });
    },
    onDialogClose() { //dialog关闭的时候重置表单
      this.$refs.form.resetFields();
    },
    onReg(formName) { // 确认注册
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = {
            companyname: this.form.name,
            type: Number(this.form.region) - 1,
            email: this.form.emall,
            code: this.form.code,
            registerCode: this.form.registerCode,
            province: this.form.address[0],
            city: this.form.address[1],
            area: this.form.address[2],
            phone: this.form.phone,
            pwd: md5(this.form.password)
          };
          this.isConfirmLoading = true;
          this.$api.publicApi.Register(params).then(res => {
            let { data, message, status } = res.data;
            if (status == 200) {
              this.$confirm('注册成功，企业号已通过短信发送到您的手机，请通过企业号登录！', '系统提示', {
                confirmButtonText: '我知道了',
                showCancelButton: false,
                type: 'success'
              }).then(() => {
                this.$emit('goLogin');
              });
              if (process.env.NODE_ENV == "prod" || process.env.NODE_ENV == "newProd") {
                this.GetWebService(params, data.companynumber);
              }
              this.isDialog = false;
            }
            this.isConfirmLoading = false;
          }).catch(() => {
            this.isConfirmLoading = false;
          });

        }
      });
    },
    GetWebService(data, Serial) {
      let params = {
        companyName: data.companyname,
        phone: data.phone,
        email: data.email,
        province: data.province,
        city: data.city,
        SalesCode: data.code,
        crmtype: '',
        Serial,
      };
      this.$api.publicApi.GetWebService(params);
    },
  },
  mounted() {
    this.getindustryidList();
  },
};
</script>

<style lang="less" scoped>
#signup-dialog {
  :deep( .el-dialog) {
    min-width: 570px;
  }
  :deep( .dialog-box) {
    .el-dialog__header {
      border-bottom: none !important;
    }
    .el-form {
      width: 96%;
      // margin: auto;
      // margin-top: 20px;
      .el-form-item__content {
        display: flex;
        p {
          margin-left: 10px;
          color: #f00;
          font-size: 12px;
        }
      }
    }
  }
  // 2022-06-08 新增

  width: 100%;
  height: calc(100% - 65px);
  background-color: #faf6fa;
  position: relative;
  .ResetBody {
    width: 80%;
    height: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
    box-shadow: 0px 0px 30px rgb(224, 224, 224);
  }
  .title {
    font-size: 30px;
    font-weight: bold;
    margin: 42px 0 32px 0;
  }
  .reg-zc {
    width: 80%;
    max-width: 1000px;
    min-width: 700px;
    overflow: auto;
    .el-form-item {
      margin-bottom: 14px;
    }
  }
  .dialog-footer {
    width: 400px;
    display: flex;
    justify-content: center;
    margin-top: 15px;
    margin-bottom: 15px;
    .el-button {
      width: 300px;
      height: 40px;
      font-size: 14px;
      border-radius: 6px;
      margin: 0;
    }
  }
}
</style>
